<template>
  <IndexFieldItem
    v-slot="{ hasValue, value }"
    :resource-name="resourceName"
    :resource-id="resourceId"
    :row="row"
    :field="field"
  >
    <p v-if="hasValue" class="text-sm">
      {{ value }}
      <span class="block text-xs text-neutral-500">
        {{
          DateTime.now()
            .setZone(value)
            .toLocaleString(DateTime.DATETIME_MED_WITH_WEEKDAY)
        }}
      </span>
    </p>

    <span v-else>&mdash;</span>
  </IndexFieldItem>
</template>

<script setup>
import { useDates } from '../../composables/useDates'

defineProps(['column', 'row', 'field', 'resourceName', 'resourceId'])

const { DateTime } = useDates()
</script>
